<template>
  <div class="page">
    <OtherHeader pageTitle="公告详情"></OtherHeader>
    <div class="contain_wrap wrapper">
      <div class="content">
        <h6 class="detail_title">{{this.$route.query.title}}</h6>
        <div class="detail_con" v-html="detailContent"></div>
        <van-loading class="mar_top1" v-if="!loadStatus" size="24px" color="#deae76">加载中...</van-loading>
      </div>
    </div>
  </div>
</template>

<script>
import OtherHeader from "@/components/OtherHeader";
import BScroll from "better-scroll";
import axios from "axios";

export default {
  name: 'ZWT',
  data() {
    return {
      newsData: [
      ],
      loadStatus:true,
      detailContent:""
    }
  },
  mounted() {
    this.$nextTick(() => {
      var scrollCom=new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        click: true,
        pullUpLoad: true
      });
      // scrollCom.on('scroll', (pos) => {
      //   // 下拉分段加载
      //   if (pos.y < 50 && this.loadStatus) {
      //     console.log("loading more...")
      //     this.loadStatus = false
      //   }
      // })
    })
  },
  created() {
    this.getNoticeDetail()
  },
  methods: {
    getNoticeDetail() {
      const url = "http://8.155.49.183/api/tfxq/findVideoValue?id="+this.$route.query.id;
      axios.get(url, {}, {
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要设置Content-Type，axios会自动设置，但如果需要自定义，可以添加此行。默认情况下不需要设置。
        }
      }).then(response => {
        if(response.data.success){
          this.detailContent = response.data.data.content
        }
      }).catch(error => {
        console.log("notice data error!", error)
        this.$toast('获取公告详情错误！');
        this.detailContent = ""
      });
    },
  },
  components: {OtherHeader}
}
</script>

<style lang="scss" scoped>
.contain_wrap {
  width: 100vw;
  height: 100vh;
  margin-top: 3.34rem;
  text-align: center;
  overflow: hidden;

  .content {
    width: 100%;
    padding-bottom: 6.68rem;
    .detail_title{
      width:90%;
      margin:1rem auto;
      color:$mColor;
      font-size: $aText;
    }
    .detail_con{
      width:90%;
      text-align: left;
      font-size: $mText;
      color:$tColor;
      margin: 0 auto;
    }
  }
}
</style>
